<!-- Created by mhy on 2018/6/27.

 -->
<template>
<div class="frame-index">
    <div class="frame-content">

        <div class="frame-left">
            <div class="f-title">
                {{detailFrame.name}}
                <div @click="$router.back()">&lt;-</div>
            </div>
            <div class="d-slide">目前已经使用21个框条，你还可使用3个。</div>

            <div class="d-line"></div>

            <button class="d-btn d-green-btn" @click="useFu">马上使用</button>
            <!--<button class="d-btn d-white-btn">免费试用3天</button>-->

            <!--<div class="d-text-block">试用时，仅管理员可见，微代理员不可见。 马上使用，您的微代理员和用户均可见</div>-->
        </div>

        <div class="frame-right">
            <div class="c-head">
                <div class="username">{{detailFrame.name}}</div>
            </div>
            <div class="c-body">

                <div class="c-item" v-if="detailFrame.shoprelate">
                    <div class="c-text green">使用中状态</div>
                </div>

                <!--<div class="c-item">-->
                    <!--<div class="c-text red">使用中状态</div>-->
                <!--</div>-->

                <x-item :label="'框条ID号：' + detailFrame.id" text="共0个我的客户使用0次"></x-item>

                <div class="c-item-block">
                    <div class="c-block-center">
                        <img :src="info.jt" class="c-item-img-1">
                        <img :src="info.czjmt" class="c-item-img-2">
                        <img :src="info.sa" class="c-item-img-3">
                    </div>
                </div>

                <x-item label="名称" :text="detailFrame.name"></x-item>
                <!--<x-item label="自定义名称" text="修改" green @click.native="change"></x-item>-->
                <x-item label="宽（cm）" :text="info.width"></x-item>
                <x-item label="厚（cm）" :text="info.height"></x-item>
                <x-item label="内凹（cm）" :text="info.inout"></x-item>
                <x-item label="背凹（cm）" text="暂无背凹设计"></x-item>

                <div class="regist-message">
                    <div>所属厂家信息</div>
                </div>
                <x-item :label="detailFrame.factoryname" :text="detailFrame.factory"></x-item>
                <x-item label="暂无种类" :text="detailFrame.seqnumber"></x-item>

                <div class="d-img-block" style="margin-bottom:228px;">
                    <div class="d-img-label">效果图</div>
                    <img :src="info.xgt" alt="">
                </div>
            </div>
        </div>
    </div>
    <yd-popup v-model="show" position="center" :close-on-masker="false">
          <div class="p-wrap">
              <div class="p-title">修改名称</div>
              <input type="text" class="p-input" v-model="content">
              <div class="p-btn-box">
                <yd-button type="hollow" class="cancel-btn" @click.native="show = false">取消</yd-button>
                <yd-button type="primary" class="confirm-btn" @click.native="confirm">确定</yd-button>
              </div>
          </div>
      </yd-popup>
</div>
</template>

<script>

  import {mapActions,mapState} from 'vuex'
    export default {
      data() {
        return {
            content: '',
            show: false
        }
      },
      components:{

      },
      methods: {
        ...mapActions([
          'getFrameDetail',
          'updateMaterial',

        ]),
        useFu () {
            this.$xalert.open({
                title: '确定要使用框条“' + this.detailFrame.name  + '”吗？',
                btnText: '确定',
                btnColor: '#FF523E',
                success: () => {
                    this.$xalert.close()
                  let params = {
                    action: 'update',
                    mtype: localStorage.getItem('setm'),
                    subaction:'add',
                    mid:this.detailFrame.id,
                    userid: localStorage.getItem('userid'),
                    subid: localStorage.getItem('userid'),
                    mstate: 'disable'
                  }
                  this.updateMaterial(params)
                    .then(data => {
                      this.$dialog.toast({
                        mes: '添加使用成功',
                        timeout: 1500,
                        icon: 'success',
                        callback: () => {

                        }
                      });
                    })

                }
            })
        },
        change () {
            this.show = true
        },
        confirm () {
            this.show = false
        }
      },
      computed: {
        ...mapState({
          detailFrame: state => state.material.detailFrame
        }),
        info () {
          try{
            let info =  JSON.parse(this.detailFrame.info)
            return info
          }catch (e){
            return {}
          }
        }
      },
      mounted (){
        let params = {action: "get", id: this.$route.query.id}
        this.getFrameDetail(params)
      }
    }
</script>

<style scoped lang="scss">
  @import './material.scss';
  @import './index.scss';

    .p-wrap{
      position: relative;
      background: #fff;
      border-radius: 6px;
      width: 360px; height: 240px;
    }

    .p-title{
      width: 100%; height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 18px;
    }

    .p-input{
      display: block;
      margin: 40px auto;
      width: 80%; height: 40px;
      outline: none;
      border: 1px solid #eaeaea;
      padding: 0 10px;
      box-sizing: border-box;
      border-radius: 4px;
    }

    .p-btn-box{
      position: absolute;
      width: 100%;
      height: 100px;
      left: 0; bottom: 0;
      &>.cancel-btn{
        width: 80px; height: 40px;
        position: absolute;
        left: 60px; top: 50%;
        transform: translateY(-50%);
        font-size: 15px;
      }
      &>.confirm-btn{
        width: 80px; height: 40px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 60px;
        font-size: 15px;
      }
    }
</style>
